<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>patang template demo</title>
<link rel="stylesheet" href="CodeMirror-2.2/codemirror.css">
<link rel="stylesheet" href="CodeMirror-2.2/simple-hint.css">
<style type="text/css">
.template{
	width: 45%;
}
.title {
	background-color: gray;
	font-weight: bold;
}
.value {
	float: right;
    position: absolute;
    right: 0;
    top: 5px;
    width: 45%;
}
#runBtn {
	display: block;
}
textarea {
	width: 99%;
	height: 200px;
}
.cm-directive {
	color: blue;
	background: #EEE0E0;
}
.cm-var {
	color: red;
}
.cm-block {
	color: green;
}
</style>

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="Template.js"></script>
<script src="CodeMirror-2.2/codemirror.js"></script>
<script src="CodeMirror-2.2/simple-hint.js"></script>
<script src="CodeMirror-2.2/modes/javascript.js"></script> 
<script src="CodeMirror-2.2/modes/TemplateMode.js"></script> 
<script src="CodeMirror-2.2/modes/TemplateHint.js"></script> 

<script type="text/javascript">
$(document).ready(function() {
	jsonEditor = CodeMirror.fromTextArea(document.getElementById("value"), {
        lineNumbers: true,
        matchBrackets: true,
        json: true
      });
	templateEditor = CodeMirror.fromTextArea(document.getElementById("templateContent"), {
        lineNumbers: true,
        matchBrackets: true,
        mode: 'template',
        extraKeys : {
			"Ctrl-Space" : function(cm) {
				CodeMirror.simpleHint(cm, CodeMirror.TemplateHint);
			}
		}
	});
	templateEditor.setValue(unescape($('#templateEl').html()));
	$('#runBtn').click(function() {
		var t = Template.compile(templateEditor.getValue());
		var values = eval('(' + jsonEditor.getValue() + ')');
		var result = t(values);
		$('#result').html(result);
	});
});

function unescape(str) {
	return str.replace(/\&lt\;/g, '<').replace(/\&gt\;/g, '>').replace(/\&amp\;/g, '&')
}
</script>
</head>
<body>
  <p class="description">
    Below are two (codemirror powered) editors. Editor on the left contains the template contents, one on the right contains the dat object. Feel free to edit them and click "run" to render the results. Limited auto-complete functionality is present in the editors.
  </p>
<script type="text/template" id="templateEl">{# this is a comment #}
<div style="background:{{color}}">{{title|upper|truncatechars:10}}</div>
{%if x < 10 %}
<span>'x' was less than 10</span>
{%else%}
<span>'x' was greater than 10</span>
{%endif%}
{%for y in arr%}
  {%if y % 2 == 0%}
  even
  {%else%}
  odd
  {%for z in arr%}
    {%if z % 2 == 0%}even{%else%}{{y}}-{{z}}odd{%endif%}
  {%endfor%}
  {%endif%}
{%endfor%}</script>
	<div class="editContainer">
		<div class="template">
			<div class="title">Template contents</div>
			<textarea id="templateContent"></textarea>
		</div>
		<div class="value">
			<div class="title">Values</div>
<textarea id="value">{
	color: '#d0d0d0',
	title: 'template output',
	x: 10, arr: [1, 2, 3]
}</textarea>
		</div>
		<button id="runBtn" onclick="">Run</button>
	</div>
	<div class="title">Results:</div>
	<div id="result" class="result"></div>
</body>
</html>